<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>空域综合态势</title>
		<link href="css/a.css" rel="stylesheet" type="text/css">

	</head>
	
	<body>
		<!-- <div id="load"><loading v-show="showLoading"></loading></div> -->
		<div id="app" v-cloak>
			<el-container>
				<el-header>
					<div class="header-left">
						<div class="map_logo">
							<img src="images/logo.png" alt="">
							<span>空域综合态势</span>
						</div>
						<div class="map_nav">
							<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#0a5083" text-color="#fff" active-text-color="#fff">
								<el-menu-item index="1">态势管理</el-menu-item>
								<el-menu-item index="2">计划进程</el-menu-item>
								<el-menu-item index="3">综合告警</el-menu-item>
								<el-menu-item index="4">情报分发</el-menu-item>
								<el-menu-item index="5">应急救援</el-menu-item>
								<el-menu-item index="6">飞行简报</el-menu-item>
								
							</el-menu>
						</div>
					</div>
	
					<div class="header-right">
						<div class="userInfo">
							<div class="avatar-name">
								<!-- <span class="date">2018.9.11</span> -->
								<span class="date">{{nowTime}}</span>
								
								<span>{{userInfo.userRightInfo.userName}}</span>
								<a target="_blank" :href="server_Url+'#/user'" title="后台" class="icon iconfont icon-houtai" @click="goset"></a>
								<a target="_blank" :href="server_Url+'bigmap/'" title="大屏" class="icon iconfont icon-guanlixitong"></a>
								<a :href="server_Url" title="退出" class="icon iconfont icon-guanbi" @click="closeMap"></a>
							</div>
						</div>
						<div class="nav_btn">
	
						</div>
					</div>
	
				</el-header>
				<el-main>
					<div id="map">

					</div>
				</el-main>
			</el-container>

			<!-- 回放统计 -->
			<div id="statistical" v-show="staOpacity" class="hfSta_bg">
				<div class="title">
					<h2>静态分析</h2>
					<i class="el-icon-close" ></i>
				</div>
				<div class="main">
					<div class="qxtTitlt">
						<span :class="setStyleVal == 0?'check':'uncheck'" @click="setStyle(0)">经纬度</span>
						<span :class="setStyleVal == 1?'check':'uncheck'" @click="setStyle(1)">高度</span>
						<span :class="setStyleVal == 2?'check':'uncheck'" @click="setStyle(2)">速度</span>
					</div>
					<div id="bodys">
						<div class="titles">
							<el-form>
								<el-form-item label="时间">
									<el-date-picker v-model="valEchartTimes" type="datetimerange" :picker-options="pickerOptions2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" text-align="right" value-format="yyyy-MM-dd HH:mm:ss" @change="setEchart">
									</el-date-picker>
								</el-form-item>
							</el-form>
						</div>
						<div v-if="setStyleVal==0" id="mains0"></div>
						<div v-else-if="setStyleVal==1" id="mains1"></div>
						<div v-else="setStyleVal==2" id="mains2"></div>
					</div>
				</div>
			</div>
			<!--回放工具条-->
			<div class="replaybar-wrap">
				<div class="replaybar-left">
					<el-form>
						<el-form-item label="时间">
							<el-date-picker v-model="value5" type="datetimerange" :picker-options="pickerOptions2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" text-align="right" value-format="yyyy-MM-dd HH:mm:ss">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="航空器编号">
							<el-input placeholder="请输入航空器编号" title="多个编号用英文','隔开" v-model="value6" clearable></el-input>
						</el-form-item>
						
					</el-form>
				</div>
				<div class="replaybar-right">
					<div class="palybox">
						<a class="iconfont icon-huifangtongji" title="回放统计" @click="getQXjson" href="#"></a>
						<a class="iconfont icon-shipinbofang" title="播放" @click="setPlay" v-loading.fullscreen.lock="fullscreenLoading" href="#"></a>
						<a class="iconfont icon-shipintuichu" @click="setPause" title="停止" href="#"></a>
						<a class="iconfont icon-shipinzanting" @click="setStop" title="暂停" href="#"></a>
					</div>
					<div class="largerbox">
						<!-- <span @click="setSpeed(1)">1.0X</span>
						<span @click="setSpeed(2)">2.0X</span>
						<span @click="setSpeed(3)">3.0X</span> -->
						<span @click="setPrev">后退</span>
						<span @click="setSpeed(2)">2.0X</span>
						<span @click="setNext">快进</span>
					</div>
				</div>
			</div>
		</div>

		<script src="plugins/vue2.5.9.js"></script>
		<script src="plugins/axios.min.js"></script>
		<!-- <script src="plugins/ele2.3.3.js"></script> -->
		<script src="plugins/element-ui.js"></script>
		<script src="plugins/httpVueLoader.js"></script>
		<script src="plugins/jquery.min.js"></script>

		<script src="plugins/leaflet.js"></script>
		<script src="plugins/iclient9-leaflet.min.js"></script>
		<script src="plugins/leaflet.draw.js"></script>
		<script src="plugins/leaflet.measurecontrol.min.js"></script>
		<script src="plugins/leaflet.rotatedMarker.js"></script>
		<script src="plugins/leaflet-heat.js"></script>

		<script src="plugins/echarts.common.min.js"></script>
		<script src="plugins/echarts-gl.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				// mixins: [mixin_common],
				data: {
					MainMap:null,
					userInfo: {
						userRightInfo:{
							userName:'heda'
						},
						pointsDecimal:"[29.618493015610223, 106.6510945558548]"
					},

					nowTime: "",
					nowTimegang: "",
					input21: "",
					activeIndex: '1',
					DataNum:0,
					setTimeKey:null,//定时器
					flightMarker:null,//加载飞机
					PlayType:false,//是否播放
					StopType:false,//是否暂停
					PauseType:false,//是否停止(重新加载)
					DataArr:[],//飞行器数据
					airNameArr:[],//加载飞机的变量名
					flyPlanArr:[],//飞行航线数组
					xunhuanType:0,
					flyPolyline:null,
					flyPolylineArr:[],
					flyPolylineGroup:null,
					airArr:[],
					airGroup:null,
					timenum:2000,
					settingData: { //设置-选项卡的数据
						showSettingbox :false,
						showSettingHotbox: false,
						activeNavtab: 'first', //设置弹窗切换的当前活跃项
						unit:"1",//单位转换
						settingval1: '',//标牌显示隐藏
						wakeOpacity:false,//尾迹显示隐藏
						settingval2: '',

						baseinfoval1: 0,
						baseinfoval2: 0,
						baseinfoval3: 0,
						options: [{
							value: '1',
							label: '1'
						}, {
							value: '5',
							label: '5'
						}, {
							value: '10',
							label: '10'
						}, {
							value: '20',
							label: '20'
						}, {
							value: '50',
							label: '50'
						}],
						mapoptions:[{
							value:'1',
							label:"地图样式1"
						},{
							value:'2',
							label:"地图样式2"
						}],
						mapvalue:'',
						value:''
					},

					pickerOptions2: {
						shortcuts: [{
							text: '最近一周',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit('pick', [start, end]);
							}
						}, {
							text: '最近一个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								picker.$emit('pick', [start, end]);
							}
						}, {
							text: '最近三个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
								picker.$emit('pick', [start, end]);
							}
						}]
					},
					value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
					value5: '',
					value6:'',
					aircraftNumberArr:[],
					backInfoArr:[],//坐标存储数组
					pointArr:[],
					pointDataArr:[],
					stopTypeArr:[],//数据回放全部完成存状态值数组
					myChart0:null,
					myChart1:null,
					myChart2:null,
					fullscreenLoading:false,
					dataTypeoptions: [{
						value: 'B10MS',
						
					}, {
						value: 'B70PY',
					
					}],
					selectedDatatype: '',
					setStyleVal:0,//0：经纬度 1：高度 2：速度
					heightAllArr:[],
					heightOneArr:[],
					get3dArr:[],
					get3dAllArr:[],
					speedOneArr:[],
					speedAllArr:[],
					XtimeArr:[],
					valEchartTimes:'',//查询echart的时间值
					staOpacity:false,//曲线图显示隐藏

					// map_Url: 'http://212.64.57.59:10008/', //加载 /map
					// system_Url: 'http://212.64.57.59:10006/',//加载 /system
					// server_Url:'http://212.64.57.59:10009/kyjs/',//加载后台管理系统
					// map_Url: 'http://127.0.0.1:10008/', //加载 /map
					// system_Url: 'http://127.0.0.1:10006/',//加载 /system
					// server_Url:'http://127.0.0.1:10009/kyjs/',
					// map_Url: 'http://192.168.8.101:10008/', //加载 /map
					// system_Url: 'http://192.168.8.101:10006/',//加载 /system
					// server_Url:'http://192.168.8.101:10009/kyjs/',//加载后台管理系统
					map_Url: 'http://dkjs.op-fly.cn/map/', //公共部分url
					system_Url: 'http://dkjs.op-fly.cn/system/',
					server_Url:'http://dkjs.system.op-fly.cn/',
				},
				created: function() {
					var _this = this;
				},
				filters: {

				},

				mounted: function() {
					this.nowTimes();
					this.initMap();
					this.getUserInfo();
				},

				methods: {
					nowTimes() {
						// 系统时间
						var self = this;
						self.timeFormate(new Date());
						setInterval(function() {
							self.timeFormate(new Date())
						}, 1000);
					},
					timeFormate(timeStamp) {
						let year = new Date(timeStamp).getFullYear();
						let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1;
						let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp).getDate();
						let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp).getHours();
						let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes();
						let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds();
						this.nowTime = year + "年" + month + "月" + date + "日" + " " + hh + ":" + mm + ":" + ss;
						this.nowTimegang = year + "-" + month + "-" + date + " " + hh + ":" + mm + ":" + ss;
						this.executorDate = year + "-" + month + "-" + date;
					},
					handleSelect(key, keyPath) {
						// 头部导航按钮选择
						var self = this;
						if(key == 1) {
							self.settingData.showSettingbox = !self.settingData.showSettingbox;
						}else if(key == 4){
							self.settingData.showSettingHotbox = !self.settingData.showSettingHotbox;
						}
					},
					handleClick(tab, event) {
						//导航工具标题切换
					},
					setWake() {
						// 设置-基础设置-尾迹显示隐藏
						console.log(this.settingData.wakeOpacity);
					},
					setUnit(){
						// 设置-基础设置- 单位切换
						console.log(this.settingData.unit)
					},
					goset() {
						// 跳转后台界面按钮
						window.open(this.server_Url+"#/user");
					},
					getUserInfo(){
						var _this = this;
						var StrA = localStorage.getItem('userInfo');
						
						
						if(StrA == null){
						    // window.location.href = this.server_Url;   
						}else{
						    _this.userInfo = JSON.parse(StrA)
						     // 获取用户信息
						    if(_this.userInfo.pointsDecimal == null || _this.userInfo.pointsDecimal == ""){
						        _this.userInfo.pointsDecimal = "[29.618493015610223, 106.6510945558548]";
						    }
						}
					},
					initMap() {
						// 地图加载
						this.map = L.map('map', {
							
							crs:L.CRS.EPSG4326,
							preferCanvas: true,
							center: JSON.parse(this.userInfo.pointsDecimal.replace(/""/ig,"")),
							maxZoom: 18,
							zoom: 8,
							zoomControl: false,
							logoControl: true,
						});
						this.MainMap = L.supermap.tiledMapLayer('http://123.206.185.152:8090/iserver/services/map-new424/rest/maps/image').addTo(this.map);

						// 比例尺
						L.control.scale().addTo(this.map);
						// 缩放
						// L.control.zoom().addTo(this.map).setPosition('topright');
						// // //测距
						// L.Control.measureControl().addTo(this.map).setPosition('topright');

						
					},
					setSpeed(val){
						
						if(val == 1){
							this.timenum = 10000 / 1;
						}else if(val == 2){
							this.timenum = 10000 / 2;
						}else if(val == 3){
							this.timenum = 10000 / 3;
						}
						console.log(this.timenum);
					},
					setNext(){
						//快进
						var _this = this;
						
						for(var i = 0 ;i < _this.airNameArr.length;i++){
							_this.airNameArr[i][1] += 5;
							if(_this.airNameArr[i][1] >= _this.pointDataArr[i].cat021s.length - 1){
								_this.airNameArr[i][1] = _this.pointDataArr[i].cat021s.length - 1;
							}
						}

					},
					setPrev(){
						//后退
						var _this = this;
						for(var i = 0 ;i < _this.airNameArr.length;i++){
							_this.airNameArr[i][1] -= 5;
							if(_this.airNameArr[i][1] <= 0){
								_this.airNameArr[i][1] = 0;
							}
						}
					},
					setPlay(){
						//播放
						var _this = this;
						
						// _this.getAir();
						if(_this.value5 == null || _this.value5 == ""){
							_this.$message({
								message: '回放时间不能为空，请选择时间',
								type: 'warning'
							});
							_this.PlayType = false;
						}else if(_this.value6 == ''){
							_this.$message({
								message: '航空器编号不能为空，请重新输入',
								type: 'warning'
							});
							_this.PlayType = false;
						}else{
							
							if(!_this.PlayType){
								// 第一次加载接口数据，点击播放功能
								_this.PlayType = true;
								_this.StopType = false;
								_this.getAir();
							}else{
								if(_this.PauseType){
									//第N次点击播放功能，并且点击播放功能上一步骤是点击停止播放功能，则执行重新飞行数据，而不是重新加载接口数据
									_this.DataNum = 0;
									_this.PauseType = false;
									_this.StopType = false;
									_this.getData();
								}
								if(_this.StopType){
									_this.StopType = false;
									_this.getData();
								}
								
							}
						}
					},
					setPause(){
						var _this = this;
						//停止
						if(_this.PlayType){
							// 有点击过播放功能，再点击停止功能才有效
							_this.PauseType = true;
							_this.StopType = true;
						}else{
							// 没有点击过播放功能，点击停止功能没有效果
							_this.PauseType = false;
						}
					},
					setStop(){
						var _this = this;
						//暂停
						if(_this.PlayType){
							_this.StopType = true;
						}
					},
					getAir(){
						var _this = this;
						_this.fullscreenLoading = true;
						
						// var dataObj ={
						// 	"aircraftNumbers":_this.value6.split(","),
						// 	"dataSourceType":"1",
						// 	"startDate":_this.value5[0],
						// 	"endDate":_this.value5[1]
						// }
						var dataObj ={
							"aircraftNumbers":["B10MS","B70PY"],
							"dataSourceType":"1",
							"startDate":"2018-12-01 00:00:00",
							"endDate":"2018-12-31 00:00:00"
						}
						// _this.map_Url+
						axios.post('http://172.18.132.111:10008/map/selectPlayback',dataObj).then(function(response) {
							
							
							if(response.data.backInfos.length == 0 && response.data.backInfos == null){
								_this.$message({
									message: "航空器编号"+_this.value6+'数据为空，请重新选择',
									type: 'warning'
								});
								_this.PlayType = false;
							}else{

							
								var HF_fly,HF_fly_line;
								if (_this.flyPolylineGroup != null) {
									_this.flyPolylineGroup.clearLayers();
									_this.flyPolylineArr = [];
								}
								if(_this.pointDataArr.length != 0){
									_this.pointDataArr = [];
								}
								for(var bi = 0;bi < response.data.backInfos.length; bi++){
									
									if(_this.pointArr.length != 0){
										_this.pointArr =[];
									}
									
									
									for(var hf_i = 0;hf_i < response.data.backInfos[bi].cat021s.length;hf_i++){
										// 把坐标提取出来 存在数组中
										_this.pointArr.push([response.data.backInfos[bi].cat021s[hf_i].lat,response.data.backInfos[bi].cat021s[hf_i].log])
									}
									_this.backInfoArr.push(_this.pointArr);

									//把对象数据提出来 存在数组中
									_this.pointDataArr.push(response.data.backInfos[bi])
									
									// 存储飞机的的变量名
									_this.airNameArr.push(["air_name"+bi,0,"setTime"+bi]);
								}
								
								for(var i =0 ;i < _this.backInfoArr.length; i++){
									
									// 加载回放飞机的航线
									HF_fly_line = L.polyline(_this.backInfoArr[i], {color: 'red'});
									_this.flyPolylineArr.push(HF_fly_line);
								}
								_this.flyPolylineGroup = L.layerGroup(_this.flyPolylineArr);
								_this.map.addLayer(_this.flyPolylineGroup);
								s
								_this.getHF_Air();
								
							}
							_this.fullscreenLoading = false;
						}).catch(function(error) {
							// console.log(error);
							_this.$message({
								message: "网络连接失败",
								type: 'warning' 
							});
							_this.PlayType = false;
							_this.fullscreenLoading = false;
						});
					},
					getHF_Air(){
						var _this = this;
						var HF_air;
						
						if (_this.airGroup != null) {
							_this.airGroup.clearLayers();
							_this.airArr = [];
						}
						for(var i =0 ;i < _this.pointDataArr.length; i++){
							s
							let log = _this.pointDataArr[i].cat021s[_this.airNameArr[i][1]].log,
							lat = _this.pointDataArr[i].cat021s[_this.airNameArr[i][1]].lat,
							airType = _this.pointDataArr[i].cat021s[_this.airNameArr[i][1]].airType,
							aircraftType = _this.pointDataArr[i].cat021s[_this.airNameArr[i][1]].aircraftType;
							if(aircraftType == null){
								aircraftType = "01"
							}else{
								aircraftType = "0"+aircraftType;
							}
							
							
							
							// 如果没暂停
							// if(!_this.StopType){
								// 播放时间 大等于 数据总长度， 说明播放完成
							if(_this.airNameArr[i][1] >= _this.pointDataArr[i].cat021s.length - 1){
								// 如果某个飞机数据达到自己的最大长度，就给他赋值自己总数据的长度，好停止继续重新加载数据
								_this.airNameArr[i][1] = _this.pointDataArr[i].cat021s.length - 1;
								_this.stopTypeArr.push('1');
							}else{
								// 如果某个飞机没加载完，继续加载
								if(_this.airNameArr[i][2] !=null){
									clearTimeout(_this.airNameArr[i][2]);
								}
								_this.airNameArr[i][1] += 1;
							
								_this.airNameArr[i][2] = setTimeout(_this.getHF_Air, _this.timenum);
								console.log(_this.airNameArr[i][1])
								
							}

							if(airType == 2){
								iconUrl = 'images/plane_zhong.png';
							}else{
								if(aircraftType == "01"){
									iconUrl = 'images/air/FW-big.png';
								}else if(aircraftType == "02"){
									iconUrl = 'images/air/rotorcraft-big.png';
								}else if(aircraftType == "03"){
									iconUrl = 'images/air/sy-big.png';
								}else if(aircraftType == "04"){
									iconUrl = 'images/air/glider-big.png';
								}else if(aircraftType == "05"){
									iconUrl = 'images/air/hot-air-big.png';
								}else if(aircraftType == "06"){
									iconUrl = 'images/air/airship-big.png';
								}else if(aircraftType == "07"){
									iconUrl = 'images/air/xxwrj-big.png';
								}else if(aircraftType == "08"){
									iconUrl = 'images/air/UAV-big.png';
								}else if(aircraftType == "09"){
									iconUrl = 'images/air/un-big.png';
								}
							}
							
							_this.airNameArr[i][0] = _this.renderAirMaker(_this.pointDataArr[i].cat021s[_this.airNameArr[i][1]],iconUrl);
							
							_this.airArr.push(_this.airNameArr[i][0]);
								
							_this.airGroup = L.layerGroup(_this.airArr);
							
							_this.map.addLayer(_this.airGroup);
							console.log(_this.stopTypeArr);
						}
						
					},
					getData() {
						var _this = this;
						
						if(_this.flyPolyline != null){
							_this.flyPolyline.remove();
						}
						
						_this.flyPolyline = L.polyline(_this.flyPlanArr, {color: 'red'}).addTo(_this.map);

						let log = _this.DataArr[_this.DataNum].log,
						lat = _this.DataArr[_this.DataNum].lat,
						airType = _this.DataArr[_this.DataNum].airType,
						aircraftType = "0"+_this.DataArr[_this.DataNum].aircraftType;
						if(!_this.StopType){
							if(_this.DataNum >= _this.DataArr.length - 1) {
								_this.$message({
									message: "回放播放完毕",
									type: 'success'
								});
							
								_this.DataNum = 0;
								_this.StopType = true;
							}else{
								if(_this.flightMarker != null){
									_this.flightMarker.remove();
								}

								if(airType == 2){
									iconUrl = 'images/plane_zhong.png';
								}else{
									if(aircraftType == "01"){
										iconUrl = 'images/air/FW-big.png';
									}else if(aircraftType == "02"){
										iconUrl = 'images/air/rotorcraft-big.png';
									}else if(aircraftType == "03"){
										iconUrl = 'images/air/sy-big.png';
									}else if(aircraftType == "04"){
										iconUrl = 'images/air/glider-big.png';
									}else if(aircraftType == "05"){
										iconUrl = 'images/air/hot-air-big.png';
									}else if(aircraftType == "06"){
										iconUrl = 'images/air/airship-big.png';
									}else if(aircraftType == "07"){
										iconUrl = 'images/air/xxwrj-big.png';
									}else if(aircraftType == "08"){
										iconUrl = 'images/air/UAV-big.png';
									}else if(aircraftType == "09"){
										iconUrl = 'images/air/un-big.png';
									}
								}
								
								_this.flightMarker = _this.renderAirMaker(_this.DataArr[_this.DataNum],iconUrl).addTo(_this.map);
								
								if(_this.setTimeKey !=null){
									clearTimeout(_this.setTimeKey);
								}
								
								_this.DataNum += 1;

								_this.setTimeKey = setTimeout(_this.getData, _this.timenum);
							}
						}
						console.log(_this.DataNum);
						
					},

					closeMap(){
						//退出地图界面
						localStorage.removeItem('userInfo');
						// window.open("http://212.64.57.59:10009/kyjs/");
					},
					renderAirMaker(res,iconUrl){
						// console.log(res);
						//正常飞机加载
						return L.marker([res.lat, res.log], {
							icon: new L.icon({
								iconUrl: iconUrl,
								iconSize: [38,38],
								className: ""
							}),
							rotationAngle: res.heading,
							rotationOrigin: "center",
							alt:res.targetAddress,
							alarm_type:"",
							types:1,
							airType:res.airType,
							aircraftType:res.aircraftType
						});
					},
					setStyle(val){
						// echart页面的 三个按钮选择方法
						
						var _this = this;
						_this.setStyleVal = val;
						if(_this.valEchartTimes == ''){
							_this.$message({
								message: "请先选择时间段，再看回放统计",
								type: 'warning'
							});
						}else{
							
							// this.getCeshi();
							// this.getDataCeshi();
							_this.getQuXianTu();
						}
						
					},
					getQXjson(){
						// 打开、隐藏 echart页面
						var _this = this;
						_this.staOpacity = !_this.staOpacity;

					},
					setEchart(){
						// 确定选择的时间之后执行事件
						var _this = this;
					
						_this.getQXTJ();
					},
					getQXTJ(){
						var _this = this;
						// var dataObj ={
						// 	"aircraftNumbers":_this.value6.split(","),
						// 	"dataSourceType":"1",
						// 	"startDate":_this.valEchartTimes[0],
						// 	"endDate":_this.valEchartTimes[1]
						// }
						var dataObj ={
							"aircraftNumbers":["B10MS","B70PY"],
							"dataSourceType":"1",
							"startDate":"2018-12-26 10:00:00",
							"endDate":"2018-12-26 10:10:30"
						}
						// 选择的时间
						_this.getCeshi();

						// _this.map_Url+
						axios.post(_this.map_Url+'map/selectPlayback',dataObj).then(function(response) {
							console.log(response);
							// console.log(response.data.backInfos.length)
							if(_this.heightAllArr.length>0){
								_this.heightAllArr = [];
							}
							if(_this.speedAllArr.length>0){
								_this.speedAllArr = [];
							}
							if(_this.get3dAllArr.length>0){
								_this.get3dAllArr = [];
							}
							
							if(response.data.backInfos.length>0){
								for(var bi = 0;bi < response.data.backInfos.length; bi++){
									// 这个循环是看有几个数据存在
									
									if(_this.get3dArr.length>0){
										_this.get3dArr = [];
									}

									for(var ll = 0;ll<_this.XtimeArr.length;ll++){
										// 存储3D图数组
										if(ll < response.data.backInfos[bi].cat021s.length){
											// console.log('进来过？'+ll)
											_this.get3dArr.push([_this.XtimeArr[ll],response.data.backInfos[bi].cat021s[ll].lat,response.data.backInfos[bi].cat021s[ll].log]);
										}
									}
									
									// console.log(bi);
									// console.log(response.data.backInfos[bi].cat021s.length)
									_this.get3dAllArr.push(_this.get3dArr);

									if(_this.heightOneArr.length != 0){
										_this.heightOneArr =[];
									}
									for(var hf_i = 0;hf_i < response.data.backInfos[bi].cat021s.length;hf_i++){
										// 把高度提取出来（height） 存在数组中
										_this.heightOneArr.push(response.data.backInfos[bi].cat021s[hf_i].height)
										// 把水平速度 （groundSpeed） 提取出来 存在数组中 
										_this.speedOneArr.push(response.data.backInfos[bi].cat021s[hf_i].groundSpeed)
									}
									_this.heightAllArr.push(_this.heightOneArr);
									_this.speedAllArr.push(_this.speedOneArr);
									
									
								}
								_this.getQuXianTu();
							}
						})
					},
					getCeshi(){
						// 数据X轴时间
						var _this = this;
						var date = new Date(_this.valEchartTimes[0]);
						var date2 = new Date(_this.valEchartTimes[1]);
						var chazhi = (date2.getTime() - date.getTime())/1000;
						// console.log(date);
						// console.log(date.getTime())
						// console.log(chazhi);
						if(_this.XtimeArr.length>0){
							_this.XtimeArr =[];
						}
						for(var i = 0;i<=chazhi;i++){
							var now = new Date(date.getTime() + i*1000);
							let mm = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
            				let ss = now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
							_this.XtimeArr.push([mm,ss].join(':'));
						}
						// console.log(arrs);
					},
					getDataCeshi(){
						// 数据曲线
						var _this = this;
						
						var aa = [];
						// console.log(_this.get3dAllArr);
						for(var i = 0;i < _this.get3dAllArr.length;i++){
							aa.push({
								type: 'scatter3D',
								name: 'scatter3D',
								dimensions: ['时间', '经度', '维度'],
								data: _this.get3dAllArr[i],
								symbolSize: 10,
								itemStyle: {
									color: '#5554FF',
								},
								emphasis: {
									itemStyle: {
										color: '#ccc'//高亮
									}
								},
							})
						}
						return aa
						
					},
					getCe1(){
						var _this = this;
						var aa = [];
						console.log('11111进来了');
						for(var i = 0;i<_this.heightAllArr.length;i++){
							aa.push({
								name:"高度：",
								
								markLine: {
									silent: true,
								},
								data:_this.heightAllArr[i],
								type: 'line',
							}) 
						}
						return aa
					},
					getCe2(){
						var _this = this;
						var aa = [];
						for(var i = 0 ;i<_this.speedAllArr.length;i++){
							aa.push({
								name:"速度：",
								markLine:{
									silent:true,
								},
								data:_this.speedAllArr[i],
								type:'line',
							})
						}
						return aa
					},
					getQuXianTu(){
						var _this = this;
						_this.$nextTick(()=>{
							if(_this.staOpacity){
								if(_this.myChart0 != null){
									_this.myChart0 = echarts.dispose();
								}
								if(_this.myChart1 != null){
									_this.myChart1 = echarts.dispose();
								}
								if(_this.myChart2 != null){
									_this.myChart2 = echarts.dispose();
								}
								if(_this.setStyleVal == 0){
									
									_this.myChart0 = echarts.init(document.getElementById('mains0'));
									_this.myChart0.setOption({
										tooltip: {},
										xAxis3D: {
											name: "时间",
											type: 'category',
											nameTextStyle: {
											color: 'rgba(0, 0, 0, 0.5)',
											fontSize: 14,
											fontWeight: 100
											},
											nameGap: 20
										},
										yAxis3D: {
											name: "经度",
											type: 'value',
											nameTextStyle: {
											color: 'rgba(0, 0, 0, 0.5)',
											fontSize: 14,
											fontWeight: 100
											},
											nameGap: 20
										},
										zAxis3D: {
											name: "维度",
											type: 'value',
											nameTextStyle: {
											color: 'rgba(0, 0, 0, 0.5)',
											fontSize: 14,
											fontWeight: 100
											},
											nameGap: 35
										},
										grid3D: {
											axisLine: {
												lineStyle: {
													color: '#20A1FF',//轴线颜色
													opacity: 0.7,
													width: 1,
												}
											},
											axisLabel: {
												textStyle: {
													color: 'rgba(0, 0, 0, 0.5)',//轴线刻度 名字
												}
											},
											splitLine: {
												lineStyle: {
													color: '#144C7D',//区域间隔线
													opacity: 0.5,
													width: 1,
												}
											},
											axisPointer: {
												lineStyle: {
													color: 'rgba(0, 0, 0, 0.5)'//坐标轴指示线
												},
												show: true// 是否显示坐标轴指示线
											},
											viewControl: {
												//autoRotate: true,//旋转展示
												//projection: 'orthographic'
												beta: 10
											},
											boxWidth: 100,
											boxHeight: 100,
											boxDepth: 100,
											
										},
										series:_this.getDataCeshi()
									})
								}else if(_this.setStyleVal == 1){
							
									_this.myChart1 = echarts.init(document.getElementById('mains1'));
									
									_this.myChart1.setOption({
										xAxis: {
											type: 'category',
											data: _this.XtimeArr
										},
										yAxis: {
											type: 'value'
										},
										tooltip: {
											trigger: 'axis'
										},
										series:_this.getCe1(),
										color:['#88ffff','#00ff00'],
										
										dataZoom: [
											{   // 这个dataZoom组件，默认控制x轴。
												type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
												start: 10,      // 左边在 10% 的位置。
												end: 60         // 右边在 60% 的位置。
											},
											{   // 这个dataZoom组件，也控制x轴。
												type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
												start: 10,      // 左边在 10% 的位置。
												end: 60         // 右边在 60% 的位置。
											}
										],
									})
									
								}else {
									
									_this.myChart2 = echarts.init(document.getElementById('mains2'));
									_this.myChart2.setOption({
										xAxis: {
											type: 'category',
											data: _this.XtimeArr
										},
										yAxis: {
											type: 'value'
										},
										tooltip: {
											trigger: 'axis'
										},
										series:_this.getCe2(),
										color:['#88ffff','#00ff00'],
										
										dataZoom: [
											{   // 这个dataZoom组件，默认控制x轴。
												type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
												start: 10,      // 左边在 10% 的位置。
												end: 60         // 右边在 60% 的位置。
											},
											{   // 这个dataZoom组件，也控制x轴。
												type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
												start: 10,      // 左边在 10% 的位置。
												end: 60         // 右边在 60% 的位置。
											}
										],
									})
								}
							}	
						})
						
						
					}
				}
			});
		</script>

	</body>

</html>